<template>
  <div class="form-designer-section">
    <div class="section-title" :data-role="titleRole" :data-sub-form-id="subFormId"
         @click="() => showBody = !showBody">
      <div class="title-wrapper">
        <a-icon type="caret-right" class="title-icon" :style="iconStyle"/>
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div @click.stop class="more-wrapper">
        <slot name="more"/>
      </div>
    </div>
    <div class="form-designer-section-divider"/>
    <Animation>
      <div v-show="showBody">
        <slot/>
      </div>
    </Animation>
  </div>
</template>
<script>
import Animation from '@/components/hhd/design/FormDesigner/Animation/Animation.vue';
import {createProps} from '@/utils';

export default {
  name: 'FormDesignSection',
  components: {Animation},
  props: {
    title: createProps(String),
    subFormId: createProps(String),
    titleRole: createProps(String),
  },
  data() {
    return {
      showBody: true
    };
  },
  computed: {
    iconStyle() {
      return {
        transform: `rotate(${this.showBody ? '90' : '0'}deg)`
      };
    },
  }
};
</script>
<style>
.form-designer-section {

}

.form-designer-section .title-wrapper {
  flex: 1;
  font-weight: bold;
}

.form-designer-section .title-icon {
  margin: 0 5px;
  transition: transform 300ms ease;
  transform: rotate(0deg);
}

.form-designer-section .more-wrapper {
  width: fit-content;
}

.form-designer-section .section-title:hover {
  color: #409EFF;
}

.form-designer-section .section-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  padding: 10px 0 5px 10px;
  align-items: center;
  background: white;
}

.form-designer-section-divider {
  margin: 0;
  height: 1px;
  background: #CDD0D6;
}
</style>